<template>
	<div class="userbox">
		<!-- <div class="title">{{ disabled?this.$t('menu.previewTitleDetail'):this.$t('menu.previewEditTable') }}</div> -->
		<div class="choseTheatreBox">
			<div class="contbox">
				<p class="title">{{ $t('menu.hotTable') }}</p>
				<div class="selectbox">
					<div class="leftbox">
						<div class="topbox">
							<!-- <el-checkbox :disabled="disabled||isEdit" v-model="selectAllTheatred" @change="selectAll">{{ $t('hotTable.saveAllTitle') }}</el-checkbox> -->
              <div>{{ $t('hotTable.saveAllTitle') }}</div>
							<div class="num">{{ (options.length||0)+'/'+shortList.length }}</div>
						</div>
						<div class="inputbox">
							<!-- <el-input v-model="searchText" :placeholder="$t('formRule.inputPlaceholder')" prefix-icon="el-icon-search" clearable @clear="searchTh(0)"></el-input> -->
							<!-- <el-button @click="searchTh(0)">{{ $t('table_data.searchText') }}</el-button> -->
						</div>
						<div class="list">
              <scTable ref="tableAllData" :apiObj="apiObj" row-key="shortId" stripe :params="sendParams" :hidePagination="true" :hideDo="true" :sortType="direction" width="100%" @dataChange="dataChange" @selection-change="selectionChange">
                <el-table-column type="selection" width="40"></el-table-column>
                <el-table-column :label="$t('short_data.table.coverPicture')" width="110">
                  <template #default="scope">
                    <img :src="scope.row.coverPicture" style="width: 60px;height: 87px; object-fit: cover; border-radius: 4px">
                  </template>
                </el-table-column>
                <el-table-column :label="$t('short_data.table.shortsName')" width="340">
                  <template #default="scope">
                    {{ setTitle(scope.row.shortName) }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('short_data.formLabel.episode')" prop="episodeCount"></el-table-column>
              </scTable>
						</div>
					</div>
					<div class="rightbox">
						<div class="topbox">
							<div class="stitle">{{ $t('hotTable.savePeoTitle') }}</div>
              <div class="alldel" @click="delAllItem">{{ $t('hotTable.allDel') }}</div>
							<!-- <el-icon v-if="!disabled&&!isEdit" @click="shortList=[];selectAllTheatred=false;selectAll(false);"><component :is="oicon('el-icon-delete')" /></el-icon> -->
						</div>
						<div class="inputbox">
							<!-- <el-input v-model="searchTextCopy" :placeholder="$t('formRule.inputPlaceholder')" prefix-icon="el-icon-search" clearable @clear="searchTh(1)"></el-input> -->
							<!-- <el-button @click="searchTh(1)">{{ $t('table_data.searchText') }}</el-button> -->
						</div>
						<div class="list">
              <scTable ref="tableData" :apiObj="selectedApiObj" row-key="shortId" stripe :params="selectedParams" :hidePagination="true" :hideDo="true" :sortType="direction" width="100%" @dataChange="selectDataChange" :data="selectedShortList">
                <el-table-column :label="$t('short_data.table.coverPicture')" width="110">
                  <template #default="scope">
                    <img :src="scope.row.coverPicture" style="width: 60px;height: 87px; object-fit: cover; border-radius: 4px">
                  </template>
                </el-table-column>
                <el-table-column :label="$t('short_data.table.shortsName')" width="340">
                  <template #default="scope">
                    {{ setTitle(scope.row.shortName) }}
                  </template>
                </el-table-column>
                <el-table-column :label="$t('short_data.formLabel.episode')" prop="episodeCount"></el-table-column>
                <el-table-column :label="$t('short_data.subtitle.operate')" width="auto" align="center">
                  <template #default="scope">
                    <el-button-group>
                      <el-icon class="del_icon" @click="delItem(scope)" size="22" color="red"><component :is="oicon('el-icon-delete')" /></el-icon>
                    </el-button-group>
                  </template>
                </el-table-column>
              </scTable>
						</div>
					</div>
				</div>
			<div id="footer">
				<el-button :loading="isSaveing" @click="closeTag" >{{$t('components.upload.cancel')}}</el-button>
				<el-button type="primary" :disabled="disabled||isEdit" :loading="isSaveing" @click="saveData">{{$t('table_data.saveText')}}</el-button>
			</div>
			</div>
		</div>
  </div>
</template>

<script>

	export default {
		emits: ['success', 'closed'],
		components: {
			// previewPage
		},
		mixins: [],
		data() {
			return {
        disabled: false,
				isEdit: false,
				isSaveing: false,
        shortList: [],
        searchTextCopy: '',
        searchText: '',
        selectAllTheatred: false,
        apiObj: null,
        sendParams: {
          pageNum: 1,
          pageSize: 399
        },
        direction: 'sortDirection',
        selectedApiObj: null,
        selectedParams: {
          pageNum: 1,
          pageSize: 399
        },
        options: [],
        selectedShortList: [],
        selectedShortListCopy: []
			}
		},
		watch: {
      
		},
		computed: {
      setTitle() {
        return function (title) {
          return (title[this.$i18n.locale] || title['en_US'] || '').toString().replace('\\n','\n');
        }
      },
			oicon(){
				return function(e){
					return e
				}
			},
		},
		created(){
			this.disabled = this.$route.query.type=='detail'?true:false;
			this.$store.commit("updateViewTagsTitle", this.$t('menu.hotTitleDetail'));
      this.apiObj = this.$API.shorts.getPopularRecommendations;
      
      // this.selectedApiObj = this.$API.shorts.getHotShortsList;

		},
		methods: {
      selectable() {
        if(this.selectedShortList.length == 0 && !this.selectedApiObj)this.selectedApiObj = this.$API.shorts.getHotShortsList;
        this.$nextTick(()=>{
          this.shortList.forEach((row) => {
            if(row.isPopular)this.$refs.tableAllData.toggleRowSelection(row, true);
          })
        })
      },
      saveData() {
        const data = this.selectedShortList.map((item, index) => ({
          shortId: item.shortId,
          sort: index + 1
        }));
        this.$API.shorts.postPopRecSort.post(data).then(res => {
          if(res.code == 'OK') {
            this.$message.success(this.$t('components.table.saveSucc'));
            this.closeTag();
          }
        });
      },
      selectDataChange(res) {
        console.log(res);
        // this.selectedShortList = res.data.list;
        // this.selectedShortListCopy = res.data.list;
        // this.options = res.data.list.filter(item => item.isPopular);
      },
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
      selectionChange(option) {
        console.log('select', option);
        this.options = option;
        if(this.selectedApiObj) {
          this.selectedShortList = this.selectedShortListCopy.concat(option);
        }
      },
      dataChange(res) {
        this.shortList = res.data.list;
        this.selectable();
      },
			delItem(row) {
        // this.$nextTick(()=>{
        //   this.shortList.forEach((item) => {
        //     if(item.shortId == row.row.shortId)this.$refs.tableAllData.toggleRowSelection(row, false);
        //   })
        // })
        this.$nextTick(()=>{
					this.selectedShortList.splice(row.$index, 1);
					this.shortList.forEach((item) => {
						if(item.shortId == row.row.shortId)this.$refs.tableAllData.toggleRowSelection(item, false);
					})
        })
			},
			delAllItem() {
        this.selectedShortList=[];
        this.selectedShortListCopy=[];
        this.$nextTick(()=>{
          this.shortList.forEach((row) => {
            this.$refs.tableAllData.toggleRowSelection(row, false);
          })
        })
			},
			searchTh(e){
        if(e == 0) {
					this.sendParams = {
            pageNum: 1,
            pageSize: 399,
            searchKeywords: this.searchText
          }
          this.$refs.tableAllData.upData(this.sendParams);
        } else {
					this.selectedParams = {
            pageNum: 1,
            pageSize: 399,
            searchKeywords: this.searchTextCopy
          }
          this.$refs.tableData.upData(this.selectedParams);
        }
				// if(e==0&&!this.searchText){
				// 	for(let i=0;i<this.shortList.length;i++){
				// 		this.shortList[i].isLight = false;
				// 	}
				// 	return
				// }
				// if(e==1&&!this.searchTextCopy){
				// 	this.selectedNum = 0;
				// 	this.selectAllTheatred = false
				// 	return
				// }
				// if(e == 0){
				// 	for(let i=0;i<this.shortList.length;i++){
				// 		if(this.shortList[i].theatreName)this.shortList[i].isLight = this.shortList[i].theatreName.includes(this.searchText)?true:false;
				// 	}
				// }else{
				// 	this.selectedNum = 0;
				// 	this.selectAllTheatred = false
				// 	this.getTheatre(this.searchTextCopy)
				// }
			},

		}
	}
</script>

<style scoped>

.choseTheatreBox {
	width: 100%;
	height: calc(100vh - 90px);
	/* z-index: 9;
	display: flex;
	justify-content: center;
	align-items: center; */
}
.del_icon {
  cursor: pointer;
}
.alldel {
  color: red;
  cursor: pointer;
  font-size: 14px;
}
.choseTheatreBox .contbox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	background: #fff;
	padding: 14px;
  height: 100%;
	/* width: 80%;
  max-height: 80%;
  min-height: 80%;
	overflow-y: scroll; */
}
.choseTheatreBox .contbox .title {
	width: 100%;
	text-align: left;
	font-size: 25px;
}
.choseTheatreBox .contbox .selectbox {
	display: flex;
	justify-content: space-between;
	width: 100%;
	margin-top: 20px;
	height: 88%;
}

.choseTheatreBox .contbox .selectbox .leftbox {
	width: 49%;
	border: 1px solid #eee;
	/* padding: 10px; */
	height: 100%;
}
.choseTheatreBox .contbox .selectbox .rightbox {
	width: 49%;
	border: 1px solid #eee;
	/* padding: 10px; */
	height: 100%;
}
.choseTheatreBox .contbox .selectbox .leftbox .topbox {
	display: flex;
	justify-content: space-between;
	font-size: 22px;
	align-items: center;
  margin-bottom: 8px;
	background: #F6F8F9;
  padding: 14px 10px;
}

.choseTheatreBox .contbox .selectbox .leftbox .topbox .el-icon{
	cursor: pointer;
}

.choseTheatreBox .contbox .selectbox .leftbox .topbox .stitle {
	/* font-size: 18px; */
  color: #494949;
}
.choseTheatreBox .contbox .selectbox .leftbox .inputbox{
	padding: 0 10px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.choseTheatreBox .contbox .selectbox .leftbox .list{
	padding: 0 10px;
	margin-bottom: 20px;
	height: 82%;
  overflow-y: scroll;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 18px;
	/* margin-bottom: 8px; */
	padding: 5px 0;
	cursor: pointer;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item .item-img{
  width: 60px;
  height: 87px;
  object-fit: cover;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item .el-icon{
	color: red;
}
.choseTheatreBox .contbox .selectbox .leftbox .list .item:hover{
	background: #eee;
}
.hightlineClass {
	background: #7c7cff;
}


.choseTheatreBox .contbox .selectbox .rightbox .topbox {
	display: flex;
	justify-content: space-between;
	font-size: 26px;
	align-items: center;
  margin-bottom: 8px;
	background: #F6F8F9;
  padding: 14px 10px;
}

.choseTheatreBox .contbox .selectbox .rightbox .topbox {
	font-size: 22px;
	color: #888;
}
.choseTheatreBox .contbox .selectbox .rightbox .inputbox{
	padding: 0 10px;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.choseTheatreBox .contbox .selectbox .rightbox .list{
	padding: 0 10px;
	margin-bottom: 20px;
	display: flex;
  flex-wrap: wrap;
	overflow-y: scroll;
  height: 82%;
	align-content: flex-start;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 18px;
	/* margin-bottom: 8px; */
	padding: 5px 0;
	cursor: pointer;
	flex: 0 0 32%;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item label{
	width: -webkit-fill-available;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item .el-icon{
	color: red;
}
.choseTheatreBox .contbox .selectbox .rightbox .list .item:hover{
	background: #eee;
}
#footer {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}
:deep(.minscTable) {
  min-width: auto;
}


@media only screen and (max-width: 750px) {
	.left-side, .right-side {
		width: 100%;
	}
	.el-form {
		flex-wrap: wrap;
	}
}
</style>
